<template>
  <div class="l-rblock">
    <el-input
      ref="main"
      :readonly="dialogVisible"
      :placeholder="$t(placeholder)"
      v-model="showValue"
      :size="size"
      :clearable="disabled ? false : clearable"
      :disabled="disabled"
      @focus="handleShow"
    >
      <span slot="append" @click="handleShow">
        <el-button slot="append" icon="el-icon-document"></el-button>
      </span>
    </el-input>
    <l-dialog
      :title="$t(placeholder)"
      :visible.sync="dialogVisible"
      :height="480"
      width="800px"
      :hasBtns="multiple"
      @opened="handleDialogOpened"
    >
      <l-layout class="l-tab-page">
        <template #left>
          <l-panel :title="$t('模版分类')" style="padding-right:0;">
            <el-tree
              ref="tree"
              node-key="id"
              :highlight-current="true"
              :data="dataItemTree_PrintSort"
              @node-click="handleNodeClick"
            >
              <span class="lr-tree-node" slot-scope="{ node }">
                <i class="el-icon-notebook-2"></i>
                {{ node.label }}
              </span>
            </el-tree>
          </l-panel>
        </template>
        <l-select-panel
          v-model="selectValue"
          ref="selectPanel"
          valueKey="f_Code"
          :columns="columns"
          :loadSelectTable="loadSelectTable"
          :multiple="false"
          @change="handleSelectPanel"
          style="padding:8px;padding-left:0;"
        >
          <template v-slot:f_Category="scope">
            {{lr_dataItemName(lr_dataItem["printSort"], scope.row.f_Category) }}
          </template>
        </l-select-panel>
      </l-layout>
    </l-dialog>
  </div>
</template>

<script>
const api = window.$api.print.printTemplate;
export default {
  name: "l-print-select",
  props: {
    value: {},
    size: String,
    placeholder: {
      type: String,
      default: "请选择",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    sidx: {
      type: String,
      default: "f_CreateDate DESC",
    },
  },
  data() {
    return {
      category: "",
      dialogVisible: false,
      text: "",
      columns: [
        { label: "编码", prop: "f_Code", width: "150" },
        { label: "名称", prop: "f_Name", minWidth: "150" },
        { label: "分类", prop: "f_Category", width: "120", align: "center" },
      ]
    };
  },
  computed: {
    dataItemTree_PrintSort() {
      return this.lr_dataItemTree(this.lr_dataItem["printSort"]);
    },
    selectValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    showValue: {
      get() {
        return this.text;
      },
      set(val) {
        this.$emit("change", null);
        this.text = val;
        this.$emit("input", val);
      },
    },
  },
  watch: {
    value: {
      handler() {
        this.setText();
      },
      immediate: true,
    },
  },
  mounted() {
    this.lr_loadDataItem("printSort");
  },
  methods: {
    async setText() {
      let value = this.value;
      if(this.$validatenull(value)){
          this.text = ''
      }
      else {
          let isGetByApi = true;
          if(this.$refs.selectPanel){
              let select =  await this.$refs.selectPanel.getSelected(false);
              if(select.length != 0 && select[0].f_Code == value){
                  isGetByApi = false;
                  this.text = select.f_Name;
              }
          }
          if(isGetByApi){
              let select = await this.$awaitWraper(api.getInfoByCode(value));
              this.text = select.f_Name;
          }
      }
    },
    handleNodeClick(node) {
      this.category = node.value;
      this.tableLoadData();
    },
    handleChange(val) {
      this.$emit("change", val);
    },
    handleShow() {
      this.dialogVisible = true;
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    loadSelectTable(postData) {
      postData.sidx = this.sidx;
      postData.isEnabled = true;
      postData.f_Category = this.category;
      return this.$awaitWraper(api.getPage(postData));
    },
    handleDialogOpened() {
      this.tableLoadData();
    },
    async handleSelectPanel() {
      let select =  await this.$refs.selectPanel.getSelected(false);
      this.text = select[0].f_Name;
      this.handleChange(select[0]);

      this.$refs.main.focus();
      this.$refs.main.blur();
      this.dialogVisible = false;
    },
  },
};
</script>
